<template>
	<view>
		<view class="header">
			<view class="header-t">
				<view class="header-t-price">
					<text>￥</text>
					{{info.js.price}}
				</view>
				<view class="header-t-tx">分类：{{info.js.classification}}</view>
			</view>
			<view class="header-title" style="font-weight: bold;">{{info.js.title}}</view>
			<view class="header-subTitle">简介：{{info.js.content}}</view>
			<view class="header-c">
				<view class="header-c-l">
					<image :src="info.js.head" mode="" @click.stop="toMixinIndex(1,{userId: info.js.id})"></image>
					<view class="header-c-l-r">
						<view class="header-c-l-r-name">{{info.js.name}}</view>
						<view class="header-c-l-r-time">{{info.js.add_time}}</view>
					</view>
				</view>
				<view class="header-c-btn" @click="toList()">
					全部视频
				</view>
			</view>
		</view>
		<view class="tip" v-html="info.js.course_notes || ''">
			<!-- <text>注明：</text>教学视频为虚拟内容服务，一经购买，概不退款，敬请谅解 -->
			
		</view>
		<view class="list">
			<view class="list-title" style="font-weight: bold;">TA的视频推荐</view>
			<view class="list-content">
				<view class="list-item" v-for="it in list" @click="toClassVideo(it.id,it.user_id)">
					<view class="list-content-img">
						<image :src="it.img" mode="aspectFill"></image>
					</view>
					<view class="list-content-tx">
						{{it.title || ''}}
					</view>
					<view class="list-content-footer">
						<view class="list-content-footer-l">
							<image :src="it.head" mode="" style="border-radius: 50%;"></image>
							{{it.nickname || ''}}
						</view>
						<view class="list-content-footer-r">
							播放<text>{{it.play_count || ''}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script> 
	import {InformationRelatedRecommendations} from '@/common/http/api.js'
	export default {
		props:['info','courseId'],
		data(){
			return {
				//分页
				params:{
					page: 1,
					course_id: this.courseId
				},
				isList: true,
				list: [],
			}
		},
		created() {
			
			this.init()
		},
		methods:{
			toLogin() {
				let url = '/pages/login/login?isApi=2'
				if (this.shareId) {
					url += '&shareId=' + this.shareId
				}
				uni.navigateTo({
					url
				})
			},
			onReachBottomHttp() {
				if(this.isList){
					this.params.page ++
					this.init()
				}
			},
			init(){
				uni.showLoading()
				InformationRelatedRecommendations(this.params).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length > 0) {
						if(this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},
			toClassVideo(id,userId){
				let token = uni.getStorageSync('token')
				if(!token) {
					this.toLogin()
					return
				}
				uni.navigateTo({
					url:'/pagesB/teachingCourses/teachingCourses?id=' + id 
				})
			},
			toList(){
				let token = uni.getStorageSync('token')
				if(!token) {
					this.toLogin()
					return
				}
	
				uni.navigateTo({
					url:'/pagesA/courseList/courseList?id='+this.info.js.id+'&cid='+this.info.js.circle_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		box-sizing: border-box;
		padding: 0 31rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		background: white;
		padding-bottom: 30rpx;
		margin-bottom: 21rpx;
		.header-t {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 33rpx;
			.header-t-price {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 46rpx;
				color: #F71515;
				text {
					font-size: 26rpx;
				}
			}
			.header-t-tx {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #131313;
			}
		}
		.header-title {
			width: 100%;
			margin-bottom: 24rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 36rpx;
			color: #131313;
		}
		.header-subTitle {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 30rpx;
		}
		.header-c {
			width: 100%;
			display: flex;
			align-items: center;
			.header-c-l {
				flex: 1;
				min-width: 0;
				display: flex;
				align-items: center;
				image {
					width: 68rpx;
					height: 68rpx;
					margin-right: 22rpx;
					border-radius: 50%;
				}
				.header-c-l-r {
					.header-c-l-r-name {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 26rpx;
						color: #131313;
						margin-bottom: 21rpx;
					}
					.header-c-l-r-time {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
			.header-c-btn {
				width: 150rpx;
				height: 50rpx;
				background: #12B475;
				border-radius: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
	.tip {
		width: 100%;
		margin-bottom: 37rpx;
		background: #EFEFEF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #131313;
		padding: 10px 0;
		line-height: 40rpx;
		text {
			color: #12B475;
		}
	}
	.list {
		width: 690rpx;
		margin: 0 auto;
		padding-bottom: 30rpx;
		.list-title {
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 28rpx;
			color: #131313;
			margin-bottom: 26rpx;
		}
		.list-content {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-gap: 20rpx;
			.list-item {
				flex: 1;
				min-width: 0;
			}
			.list-content-img {
				width: 100%;
				height: 196rpx;
				margin-bottom: 21rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 6rpx;
				}
			}
			.list-content-tx {
				height: 60rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #131313;
				overflow:hidden;
				text-overflow:ellipsis;
				-webkit-line-clamp:2;
				-webkit-box-orient:vertical;
				margin-bottom: 25rpx;
			}
			.list-content-footer {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.list-content-footer-l {
					display: flex;
					align-items: center;
					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 18rpx;
					}
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #131313;
				}
				.list-content-footer-r {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #131313;
					text {
						color: #12B475;
					}
				}
			}
		}
	}
</style>